<template>
  <div id="assembly-time-picker" style="margin:80px 0 0 50px">
    <bf-timePicker
      style="margin-right:50px"
      :disabledHours="[0,1,3,4,5,6,12]"
      :disabledMinutes="[0,1,2]"
      hideDisabledOptions
      format="hh:mm A"
      value-format="hh:mm A"
      :render-html="true"
      placeholder="请选择时间"
      @change="handleChange"
    ></bf-timePicker>
    <bf-timePicker
      style="margin-right:50px"
      v-model="value1"
      :render-html="true"
      @change="handleChange"
    ></bf-timePicker>
    <bf-timePicker
      v-model="value2"
      type="timerange"
      placement="bottom-start"
      placeholder="请选择时间范围"
      @change="handleChange"
    ></bf-timePicker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: new Date().getTime(),
      value2: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.value1 = "09:09:10";
    }, 2000);
  },
  methods: {
    handleChange(value) {
      console.log(value, "change");
    },
  },
};
</script>